<template>
	<el-menu class="menu-nav" default-active="index" background-color="#20222A" text-color="#fff" active-text-color="#00ffff"
	 :collapse="isCollapse">
	 <!-- 系统首页 -->
		<!-- <el-menu-item @click="openPage(item.index)" v-if="!item.children" v-for="item in menus" :index="item.index" :key="item.index">
			<i :class="item.icon"></i>
			<span slot="title">{{item.name}}</span>
		</el-menu-item> -->
		
		<!-- 菜单 -->
		<el-submenu   v-for="(item,index) in menus" :index="item.index" :key="item.index"	>
			
			<template   slot="title">
				<div  @click="openPage(item.index)">
					<i :class="item.icon"></i>
					<span slot="title">{{item.name}}</span>
				</div>
			</template>
			
			<template v-for="(children,index) in item.children" >
				<el-menu-item v-if="!children.children"  @click="openPage(children.index)" :index="children.index">
				{{children.name}}
				</el-menu-item>
				
				<!-- 菜单中的下拉菜单 -->
				<template v-if="children.children">
				 <el-submenu :index='children.index' >
				          <template slot="title">{{children.name}}</template>
				          <el-menu-item index="1-4-1" :key="index" v-for="(childrenSon,index) in children.children">{{childrenSon.name}}</el-menu-item>
				</el-submenu> 
				</template>
				
			</template>

		</el-submenu>
		
	</el-menu>
</template>

<script>
	export default {
		props: ['isCollapse'],
		data() {
			return {
				menus: [{
						name: '系统首页',
						index: 'index',
						icon: 'el-icon-s-home'
					},
					{
						name: '村情简介',
						index: 'e',
						icon: 'el-icon-document-copy',
						children: [{
							name: '村情简介',
							index: 'cunqingjianjie'
						},{
							name: '组织架构',
							index: 'zuzhijiagou'
						}]
					},{
						name: '职责制度',
						index: 'zhizezhidu',
						icon: 'el-icon-document-copy',
						
					},{
						name: '事务流程',
						index: 'r',
						icon: 'el-icon-document-copy',
						children: [{
							name: '村级决策类事项清单',
							index: 'juecelei'
						},{
							name: '村级管理类事项清单',
							index: 'guanlilei'
						},{
							name: '村级服务类事项清单',
							index: 'fuwulei'
						}]
					},{
						name: '三务公开',
						index: 'tttt',
						icon: 'el-icon-document-copy',
						children: [{
							name: '村务',
							index: 'ttttt',
							children:[
								{
									name: '村委工作目标',
									index: 'yy'
								},{
									name: '村级资产表',
									index: 'yyy'
								},{
									name: '村级工程',
									index: 'yyyy'
								},{
									name: '劳务用工',
									index: 'yyyy'
								},{
									name: '低保名单',
									index: 'yyyy'
								},{
									name: '宅基地审批',
									index: 'yyyy'
								},{
									name: '救助帮扶',
									index: 'yyyy'
								}
							]
						},{
							name: '财务',
							index: 'yyyyy',
							children:[
								{
									name: '村级财务货币资金逐项逐笔公开表',
									index: 'u'
								},{
									name: '阳光理财明细公开表',
									index: 'uu'
								},{
									name: '村级财务收入情况公开表',
									index: 'uuuu'
								},{
									name: '村级财务支出情况公开表(附非生产性开支发票）',
									index: 'uuuu'
								},{
									name: '村级会计科目余额公开表',
									index: 'uuuu'
								}
							]
						},{
							name: '党务',
							index: 'uuut',
							children:[
								{
									name: '2019年度村“两委”班子成员测评汇总表',
									index: 'aa'
								},{
									name: '2019年度村农村党员先锋指数考评汇总表',
									index: 'aaa'
								},{
									name: '燎原村群团组织情况',
									index: 'aas'
								},{
									name: '2019年度困难党员情况表',
									index: 'aas'
								},{
									name: '燎原村党组织基本情况',
									index: 'aas'
								},{
									name: '燎原村主题教育情况汇报',
									index: 'aas'
								},{
									name: '党支部年度工作目标',
									index: 'aas'
								},{
									name: '党员发展情况公示',
									index: 'aas'
								},{
									name: '党费收缴情况公示',
									index: 'aas'
								},{
									name: '后备干部情况汇总表',
									index: 'aas'
								}
							]
						}]
					},{
						name: '荣誉风采',
						index: 'ss',
						icon: 'el-icon-document-copy',
						children: [{
							name: '荣誉榜',
							index: 'sss'
						},{
							name: '乡贤榜',
							index: 'ssss'
						}]
					},{
						name: '监督检查',
						index: 'z',
						icon: 'el-icon-document-copy',
						children: [{
							name: '三位监督',
							index: 'zzz'
						},{
							name: '全科体检',
							index: 'zzzz'
						},{
							name: '问廉书记',
							index: 'az'
						},{
							name: '监督网络',
							index: 'zzx'
						},{
							name: '清风入户',
							index: 'x'
						},{
							name: '廉情直通车',
							index: 'xxx'
						}]
					}
				]
			}
		},
		methods: {
			openPage(page) {
				this.$emit('openPage', page)
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-menu {
		border: none;
	}

	.menu-nav:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>
